(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "mobile/services/shoppingService", "react", "mobile/controls/dataList", "mobile/controls/tabs", "mobile/site"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const shoppingService_1 = require("mobile/services/shoppingService");
    const React = require("react");
    const dataList_1 = require("mobile/controls/dataList");
    const tabs_1 = require("mobile/controls/tabs");
    const site_1 = require("mobile/site");
    // export default function (page: Page) {
    //     let shopping = page.createService(ShoppingService);
    //     let defaultIndex = 0;
    //     type Status = 'available' | 'used' | 'expired';
    //     let statuses: Status[] = ['available', 'used', 'expired'];
    // }
    let defaultIndex = 0;
    let statuses = ['available', 'used', 'expired'];
    class CouponPage extends React.Component {
        constructor(props) {
            super(props);
            this.state = { status: statuses[defaultIndex] };
            this.shopping = this.props.createService(shoppingService_1.ShoppingService);
        }
        activeItem(index) {
            // this.state.status = statuses[index];
            // this.setState(this.state);
            this.setState({ status: statuses[index] });
        }
        loadData(pageIndex, status) {
            return this.shopping.myCoupons(pageIndex, status);
        }
        componentDidUpdate() {
            this.dataList.reset();
            this.dataList.loadData();
        }
        render() {
            let status = this.state.status;
            return React.createElement(React.Fragment, null,
                React.createElement("header", null,
                    site_1.defaultNavBar(this.props.source, { title: '我的优惠券' }),
                    React.createElement(tabs_1.Tabs, { className: "tabs", defaultActiveIndex: defaultIndex, onItemClick: (index) => this.activeItem(index), scroller: () => this.dataView }, statuses.map(o => (React.createElement("span", { key: o }, this.shopping.couponStatusText(o)))))),
                React.createElement("section", { ref: o => this.dataView = o },
                    React.createElement("hr", null),
                    React.createElement(dataList_1.DataList, { ref: o => this.dataList = o, loadData: (pageIndex) => this.loadData(pageIndex, status), dataItem: (o) => (React.createElement("div", { key: o.Id },
                            React.createElement("div", { className: "coupon" },
                                React.createElement("div", { className: `pull-left ${status}` },
                                    "\uFFE5",
                                    React.createElement("span", { className: "text" }, o.Discount)),
                                React.createElement("div", { className: "main" },
                                    React.createElement("div", null, o.Title),
                                    React.createElement("div", { className: "date" }, `有效期 ${o.ValidBegin.toLocaleDateString()} 至 ${o.ValidEnd.toLocaleDateString()}`))),
                            React.createElement("hr", null))), emptyItem: React.createElement("div", { className: "norecords" },
                            React.createElement("div", { className: "icon" },
                                React.createElement("i", { className: "icon-money" })),
                            React.createElement("h4", { className: "text" },
                                "\u6682\u65E0",
                                this.shopping.couponStatusText(status),
                                "\u7684\u4F18\u60E0\u5238")) })));
        }
    }
    exports.default = CouponPage;
});
/*

 <div className="pull-left" style={{ position: 'relative', top: 4, left: 16, width: '100%', paddingLeft: 50 }}>
                                            <div>{o.Title}</div>
                                            <div style={{ paddingTop: 6 }}>
                                                <span style={{ paddingRight: 8 }}>有效期 </span>
                                                <span>{o.ValidBegin}</span> 至
                                            <span>{o.ValidEnd}</span>
                                            </div>
                                            <div data-bind="html:Remark" style={{ paddingTop: 6 }}>
                                            </div>
                                        </div>
                                        <div style={{ textAlign: 'center', position: 'absolute' }}>
                                            <div data-bind="text:Discount + \'元\'" style={{ fontSize: 24 }}>
                                                ￥{o.Discount.toFixed(2)}元
                                        </div>
                                            <div style={{ paddingLeft: 4 }}>
                                                {shopping.couponStatusText(status)}
                                            </div>
                                            <div data-bind="visible:Selected" style={{ position: 'relative', top: 6 }}>
                                                <i className="icon-ok-sign text-primary" style={{ fontSize: 26 }}></i>
                                            </div>
                                        </div>
                                        <div className="clearfix"></div>*/ 
